<template>
	<view class="signOut">
		<view class="title">
			<view>离场签退</view>
			<view>{{ signOutTime.substring(0, signOutTime.length - 3) }}</view>
		</view>
		<view class="content">
			<view class="location">
				<image src="/static/images/maintain/location.png" mode=""></image>
				<view>{{ msg.buildingName }}</view>
			</view>
			<view class="location">
				<image src="/static/images/jiantou.png" mode=""></image>
				<view class="guide">
					<view>退场照</view>
					<view class="guide_item" @click="toGuide">

						<view>(
							<image src="/static/images/maintain/guide.svg" mode=""></image>
							查看签退指引)
						</view>
					</view>
				</view>
			</view>
			<view class="location">
				<image src="/static/images/index/ling.png" mode=""></image>
				<view>请上传该电梯纸质保养单</view>
			</view>
			<!-- <view class="content-title">
				
			</view> -->
			<view class="flex">
				<imageDragSort :parentStyle="parentStyle" :list="lists" @changeList="changeImg" :max="1">
				</imageDragSort>
			</view>

		</view>
		<view class="bottom">
			<view @click="handleCancle">取消</view>
			<view @click="handleSingout">签退</view>
		</view>
	</view>
</template>

<script>
import imageDragSort from '@/components/image-drag-sort/index.vue';
import { formatTime } from '@/utils/utils.js';
import {
	getDistance
} from '@/utils/tools.js'; // 经纬度距离计算 
export default {
	props: {
		msg: {
			type: Object
		},
		signOutTime: {
			type: String
		}
	},
	components: {
		imageDragSort
	},
	data() {
		return {
			parentStyle: 0,
			signImage: ''
		};
	},
	created() {

	},
	computed: {

	},
	watch: {
		signOutTime(newVal) {
			// console.log(newVal,'时间')
		}
	},
	methods: {
		toGuide() {
			uni.navigateTo({
				url: '/subpages/siginGuide/index?type=2'
			});
		},

		changeImg(val) {
			// console.log(val,'获取图片的值')
			this.signImage = val[0];
		},
		handleCancle(val) {
			this.$emit('cancle');
		},
		async handleSingout() {
			let res = await this.getLocalInfo();

			if (!res.latitude) {
				uni.showModal({
					title: '提示',
					content: '地理位置获取失败,请检查是否打开GPS或已授权',
					showCancel: false
				});
				return;
			}
			let distance = getDistance(res.latitude, res.longitude, this.msg.latitude, this.msg.longitude);
			if (distance > this.$config.maxDistance) {
				uni.showToast({
					title: `请在保养地点${this.$config.maxDistance}米范围内点击到达`,
					icon: 'none'
				});
				return;
			}
			// return false
			// console.log(this.signImage,222)
			if (this.signImage === '') {
				uni.showToast({
					title: '请先上传图片',
					icon: 'none'
				});
			} else {
				this.$emit('comfire', { signImage: this.signImage });
			}
		}

	},
};
</script>

<style lang="scss" scoped>
.signOut {
	width: 506rpx;
	// height: 466rpx;
	background-color: #fff;
	border-radius: 16rpx;
	display: flex;
	flex-direction: column;

	.title {
		padding: 22rpx 28rpx;
		display: flex;
		background-color: #0091ff;
		color: #fff;
		justify-content: space-between;

		view:nth-child(1) {
			font-size: 32rpx;
		}

		view:nth-child(2) {
			// width: 88rpx;
			height: 40rpx;
			background: #ffffff;
			border-radius: 20rpx;
			color: #0091ff;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 16rpx;
		}
	}

	.content {
		// height: 300rpx;
		padding: 24rpx 28rpx;

		// display: flex;
		// flex: 1;
		// justify-content: center;
		// flex-direction: column;
		// align-items: center;
		// view{
		// 	flex: 1;
		// }
		.content-title {
			color: #333;
			margin-bottom: 20rpx;
		}

		.location {
			margin-bottom: 32rpx;
			// height: 40rpx;
			display: flex;
			color: #333;
			font-size: 28rpx;
			align-items: center;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 8rpx;
			}

			.guide {
				display: flex;
				align-items: center;
				width: 100%;

				.guide_item {
					display: flex;
					font-size: 24rpx;
					color: #0091ff;
					align-items: center;
					flex: 1;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 0;
					}
				}
			}

			text {
				margin-left: 14rpx;
			}
		}
	}

	.bottom {
		height: 73rpx;
		border-top: 2rpx solid #f5f5f5;
		color: 300;
		display: flex;

		view {
			display: flex;
			flex: 1;
			align-items: center;
			justify-content: center;
		}

		view:nth-child(2) {
			color: #0091ff;
			border-left: 2rpx solid #f5f5f5;
		}
	}
}
</style>
